import * as THREE from "three";
import {AxesHelper, PCFSoftShadowMap} from "three";
import moonImg from "@/assets/imgs/moon.jpg";
import earthImg from "@/assets/imgs/earth.jpg";
import {CSS2DObject, CSS2DRenderer} from "three/addons";
import {OrbitControls} from "three/addons/controls/OrbitControls.js";
import Stats from "three/addons/libs/stats.module.js";


export function init() {


  const width = window.innerWidth
  const height = window.innerHeight
  const earthWidth = 4
  const moonWidth = 1
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 200);
  camera.position.set(15, 20, 15);
  camera.lookAt(0, 0, 0);
  const renderer = new THREE.WebGLRenderer();
  renderer.setClearAlpha(0)
  renderer.setPixelRatio(window.devicePixelRatio)
  renderer.shadowMap.enabled = true
  renderer.shadowMap.type = PCFSoftShadowMap;
  renderer.setSize(window.innerWidth, window.innerHeight - 40);
  document.getElementById('three').appendChild(renderer.domElement);
  const controls = new OrbitControls(camera, renderer.domElement);
  const textureLoader = new THREE.TextureLoader();
  const stats = new Stats()
  stats.domElement.style.top="40px"
  document.body.appendChild(stats.domElement)
  const axes = new AxesHelper(7)
  // scene.add(axes)

  const light = new THREE.PointLight(0xffffff, 10000, 0, 1.8);
  light.position.set(-30, 2, 50);
  light.castShadow = true
  scene.add(light)

  const alight = new THREE.AmbientLight(0xffffff, 0.1)
  scene.add(alight)

  const moonGeometry = new THREE.SphereGeometry(moonWidth, 100, 100)
  const moonMaterial = new THREE.MeshPhongMaterial({map: textureLoader.load(moonImg),});
  const moon = new THREE.Mesh(moonGeometry, moonMaterial)
  moon.receiveShadow = true
  moon.castShadow = true
  scene.add(moon)

  const earthGeometry = new THREE.SphereGeometry(earthWidth, 100, 100)
  const earthMaterial = new THREE.MeshPhongMaterial({map: textureLoader.load(earthImg), shininess: 0});
  const earth = new THREE.Mesh(earthGeometry, earthMaterial)
  earth.receiveShadow = true
  earth.castShadow = true
  scene.add(earth)

  var earthDiv
  if (document.getElementById('tagsEarth')) {
    earthDiv = document.getElementById('tagsEarth')
  } else {
    earthDiv = document.createElement('div')
  }
  // const earthDiv=document.createElement('div')
  earthDiv.id = 'tagsEarth'
  earthDiv.style.color = '#ffffff'
  earthDiv.style.fontSize = '16px'
  earthDiv.textContent = 'Earth'

  const earthLabel = new CSS2DObject(earthDiv)
  earthLabel.position.set(0, earthWidth, 0)
  earth.add(earthLabel)

  var moonDiv
  if (document.getElementById('tagsMoon')) {
    moonDiv = document.getElementById('tagsMoon')
  } else {
    moonDiv = document.createElement('div')
  }
  // const moonDiv=document.createElement('div')
  moonDiv.id = 'tagsMoon'
  moonDiv.style.color = '#ffffff'
  moonDiv.style.fontSize = '16px'
  moonDiv.textContent = 'Moon'

  const moonLabel = new CSS2DObject(moonDiv)
  moonLabel.position.set(0, moonWidth, 0)
  moon.add(moonLabel)

  const laberRenderer = new CSS2DRenderer()
  laberRenderer.setSize(width, height)
  laberRenderer.domElement.style.position = 'absolute'
  laberRenderer.domElement.style.top = '-10px'
  document.body.appendChild(laberRenderer.domElement)

  var num = 0

  function animate() {
    stats.update()
    num += 0.01
    const axis = new THREE.Vector3(0, 1, 0)
    earth.rotateOnAxis(axis, 0.5 * Math.PI / 1000)
    moon.position.set(Math.sin(num) * 11, 0, Math.cos(num) * 11)
    renderer.render(scene, camera)
    laberRenderer.render(scene, camera)
    requestAnimationFrame(animate)
  }

  renderer.render(scene, camera)
  animate()

  window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  })

}